[#ftl]
<template>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        [#list entity.inputs as input]
            [#if !(input.record)]
            [#if input.data?ends_with("List")]
                <el-form-item label="${input.label}" prop="${input.name}">
                    <el-select v-model="form.${input.name}" placeholder="${input.label}">
                        <el-option v-for="${input.name} in ${input.data}" :label="${input.name}.name" :value="${input.name}.id" :key="${input.name}.id"></el-option>
                    </el-select>
                </el-form-item>
                [#elseif input.data?ends_with("Enums")]
                    <el-form-item label="${input.label}" prop="${input.name}">
                        <el-select v-model="form.${input.name}" placeholder="${input.label}">
                            <el-option v-for="${input.name} in ${input.data}" :label="${input.name}.label" :value="${input.name}.name" :key="${input.name}.name"></el-option>
                        </el-select>
                    </el-form-item>
                [#elseif input.data=="Number"]
                <el-form-item label="${input.label}" prop="${input.name}">
                    <el-input-number
                            v-model="form.${input.name}"
                            label="${input.label}"
                    ></el-input-number>
                </el-form-item>
                [#elseif input.data=="Time"]
                <el-form-item label="${input.label}" prop="${input.name}">
                    <el-time-select
                            v-model="form.${input.name}"
                            start='08:30'
                            step='00:15'
                            end='18:30'
                            placeholder="选择时间">
                    </el-time-select>
                </el-form-item>
                [#elseif input.data=="Date"]
                <el-form-item label="${input.label}" prop="${input.name}">
                    <el-date-picker
                            v-model="form.${input.name}"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                [#elseif input.data=="DateTime"]
                <el-form-item label="${input.label}" prop="${input.name}">
                    <el-date-picker
                            v-model="form.${input.name}"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                [#else]

                <el-form-item label="${input.label}" prop="${input.name}">
                    <el-input v-model="form.${input.name}" placeholder="${input.label}"></el-input>
                </el-form-item>
            [/#if]
            [/#if]
        [/#list]
        <!-- <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item> -->
    </el-form>
</template>

<script lang="ts">
    import { defineComponent } from "vue";
    import moment from "moment";
    export default defineComponent({
        name: "${entity.entityName}Form",
        setup(props){
            const lyear=parseInt(moment().format('yyyy'));
            const rules={
                id:{required:false}
                [#list entity.inputs as input][#if !(input.record)],${input.name}: [
                    { required: true,
                        message: [#if input.data?ends_with("List")]'请选择${input.label}'
                        , trigger: 'change' [#elseif input.data?ends_with("Enums")]'请选择${input.label}'
                        , trigger: 'change'[#else] '请输入${input.label}', trigger: 'blur'[/#if] }
                ][/#if][/#list]
            }
            return {[#list entity.datas as data][#if data_index!=0],[/#if]${data.list}:props.${data.name}s[/#list],initVal:props.value,lyear,maxYear:lyear+10,minYear:lyear-10,rules}
        },
        created() {},
        data() {
            return {
                form: {
                    id: this.initVal?(this.initVal as any).id:null
                [#list entity.inputs as input]
                ,${input.name}: this.initVal?(this.initVal as any).${input.name}:null
                [/#list]
        },
        };
        },
        props: {
            value:{}
            [#list entity.datas as data],${data.name}s:Array[/#list]
        },
        methods: {
            validateForm(f:Function){
                return (this.$refs.form as any).validate(f);
            }
        },
    });
</script>

<style lang="scss" scoped></style>
